<template>
  <div class="audio">
    <img src="../assets/img/audio.png" @click="doPlayer()" :class="isPlay?'on':'off'">
    <!-- <audio 
    id="player" 
    loop="loop" 
    autoplay
    src="D:/bg.mp3">
    </audio> -->
    <video
    id="player" 
    autoplay=""
     loop="loop" 
    name="media"><source src="file:///D:/bg.mp3" type="audio/mp3"></video>
  </div>
</template>

<script>
export default {
  name: "player",
  data() {
    return {
      isPlay: true
    };
  },
  mounted() {
    let player = document.querySelector("#player"),
      _this = this;
    player.onplay = function() {
      _this.isPlay = true;
    };
    player.onpause = function() {
      _this.isPlay = false;
    };
  },
  methods: {
    doPlayer() {
      let audio = document.querySelector("#player");
      if (this.isPlay) {
        audio.pause();
      } else {
        audio.play();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.audio {
  display: flex;
  flex-flow: row-reverse;
  img {
    width: 2rem;
    height: 2rem;
    margin: 0.8rem;
    transition: all 2s;
    &.on {
      opacity: 1;
      animation: player 8s linear infinite;
    }
    &.off {
      opacity: 0.5;
    }
  }
}
@keyframes player {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
